// 这是路由组件 不是普通的js文件 这是和vue不同的地方
import React, { Component } from 'react'
// 引入路由组件
// Switch 用来切换 Route 路由
import {Switch, Route} from 'react-router-dom'
// 导入需要展示的组件
import Hello from '../components/Hello'
import Com1 from '../components/Com1'
import Com2 from '../components/Com2'
import List from '../components/List'
import Detail from '../components/Detail'

// 路由组件和非路由组件,被<Route></Route>包裹的就是路由组件，就有路由的属性和方法
// 没有被包裹的就是非路由组件，withRouter处理

export default class Router extends Component {
  render() {
    return (
      <>
        <Switch>
          <Route path="/com1" component={Com1}></Route>
          <Route path="/com2" component={Com2}></Route>
          <Route path="/hello" component={Hello}></Route>
          <Route path="/list" component={List}></Route>
          <Route path="/detail/:id" component={Detail}></Route>
        </Switch>
      </>
    )
  }
}
